<template>
	<view class="collect">
		<view class="tis" v-if="menus.length==0">
			<image src="../../static/img/菜篮子.jpg" mode="widthFix"></image>
		</view>

    <view class="order_list">
      <view class="item" v-for="item in menus" :key="item.id" >

        <view class="row_item">
          <view class="order_avatar">
            <image :src="item.avatar" mode="aspectFill"></image>
          </view>
          <view class="txt">
            <text class="name">厨师姓名：{{item.name}}</text>
            <text class="name">预约时间: {{item.appointmentTime}}</text>
            <text class="num">联系电话: {{item.telPhone}}</text>
          </view>
        </view>
        <view style="margin-top: 16upx; margin-left: 32upx"> 地址：{{item.address}}</view>

      </view>

    </view>

	</view>
</template>

<script>


	import {
		appointment_list
	} from '@/api/chef.js'
	
	export default {
		data() {
			return {
				menus:[]
			}
		},
		onLoad() {
			this.getChefList()
		
		},
		methods: {
			
			getChefList(){
				appointment_list({}).then(res=>{
          console.log(res)
					this.menus=res.data
				})
			},
		},
	}
</script>

<style lang="scss">

.order_list{
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16upx;

  gap: 20upx;
  .item {
    width: 90%;
    height: 330upx;
    border-radius: 30upx;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    padding: 16upx;

    .row_item{
      display: flex;

      .txt{
        margin-left: 16upx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }

    .order_avatar {
      image {
        width: 250rpx;
        height: 250rpx;
        border-radius: 16rpx;
        background-size: cover;
      }
    }

    .txt {
      width: 100%;
      line-height: 60rpx;
      margin: 10rpx 0 30rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: #000;
    }
  }

}


	.collect {

		.tis {
			image {
				margin-left: 100rpx;
				margin-top: -200rpx;
				width: 600rpx;
			}
		}

	}
</style>
